<template>
	<div class="lx-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar">
			<div class="query-row demo-form-inline">
				<div>
					<el-form-item>
						<el-button type="primary" @click="addAttendance">添加报名</el-button>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="状态">
						<el-select v-model="queryParams.status" @change="query">
							<el-option value="" label="全部"></el-option>
							<el-option :value="0" label="待审核"></el-option>
							<el-option :value="1" label="通过"></el-option>
							<el-option :value="2" label="拒绝"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="培训主题">
						<el-select v-model="queryParams.trainId" @change="trainChange" >
							<el-option v-for="train in trainList" :key="train.id" :value="train.id" :label="train.trainTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="培训计划">
						<el-select v-model="queryParams.trainPlanId" @change="query" clearable >
							<el-option v-for="trainPlan in trainPlanList" :key="trainPlan.id" :value="trainPlan.id" :label="trainPlan.trainCourseName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item >
						<el-input maxlength="30" v-model="queryParams.selectKey" placeholder="请输入申请人姓名或工号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="query">查询</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<div class="lx-table">
			<lx-table ref="myTable" :tableData="signUpList" :tableCols="tableCols" isSelection isIndex :currentPage="queryParams.pageNum"
			 :total="queryParams.total" :pageSize="queryParams.pageSize" @sizeChange="sizeChange" @currentChange="currentChange"  @select="selectItem">
				<template slot="bottomOperate">
					<div>已选 {{selectedIdList.length}}</div>
					<el-button type="infor" size="small" style="margin-left: 24px;" @click="review(null,1)">同意</el-button>
					<el-button type="infor" size="small" @click="review(null,2)">不同意</el-button>
				</template>
			</lx-table>
		</div>
		<el-dialog title="添加报名" :visible.sync="editFormVisible" width="808px" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
			<el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
				<el-form-item  label="培训主题" prop="trainId">
					<el-input maxlength="20" v-model="editForm.trainName" readonly></el-input>
				</el-form-item>
				<el-form-item label="培训计划" prop="trainPlanId">
					<el-select v-model="editForm.trainPlanId" @change="editTrainPlanChange" style="width: 500px;">
						<el-option v-for="trainPlan in trainPlanList" :key="trainPlan.id" :value="trainPlan.id" :label="trainPlan.trainCourseName"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请人" prop="trainPlanId">
					<el-select v-model="editForm.jobNumbers"multiple    style="width: 500px;" >
						<el-option v-for="teacher in teacherList" :key="teacher.jobNumber" :value="teacher.jobNumber" :label="teacher.loginName">
							<span style="float: left">{{ teacher.loginName }}</span>
							<span style="float: right; color: #8492a6; font-size: 12px;margin-right: 20px;">{{ teacher.jobNumber }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item  label="备注" prop="remarks">
					<el-input type="textarea" maxlength="100" v-model="editForm.remarks" ></el-input>
				</el-form-item>
				 <el-form-item label="是否审核通过"  prop="status" >
				    <el-switch v-model="editForm.status" :active-value="1" :inactive-value="0"></el-switch>
				  </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeEditForm">取 消</el-button>
				<el-button type="primary" @click="submitEditForm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue";
	export default {
		components: {
			"lx-table": LxTable
		},
		async mounted() {
			let params = this.$store.state.pageParams; //传入到新建题目的查询参数，新建题目不修改直接返回
			if (params && JSON.stringify(params) != "{}") {
				if(params.trainId){
					this.queryParams.trainId = params.trainId;
				}
				if(params.trainPlanId){
					this.queryParams.trainPlanId = params.trainPlanId;
				}
			}
			this.selectTrainListBYstatustwo();
		},
		data() {
			return {
				queryParams: {
					selectKey: "",
					pageSize: 10,
					status:null,
					trainId:null,
					trainPlanId:null,
					pageNum: 1,
					total: 0
				},
				tableCols: [{
						label: '申请人',
						prop: 'applicantName',
						formatter:(row)=>{
							return row.applicantName +"("+row.jobNumber+")"
						},
						align:"center",
					},
					{
						label: '培训主题',
						prop: 'trainName',
						align:"center",
					},
					{
						label: '培训计划',
						prop: 'trainPlanName',
						align:"center",
					},
					{
						label: '备注',
						prop: 'remarks',
						align:"center",
					},
					{
						label: '提交时间',
						prop: 'createTime',
						align:"center",
					},
					{
						label: '状态',
						prop: 'status',
						type: "html",
						align:"center",
						noTips:true,
						html: (row) => {
							let status = row.status;
							let statusName = this.statusList[status];
							let cn = this.statusClass[status];
							return "<span class='"+cn+"'>"+statusName+"</span>";
						}
					},
					{
						label: '操作',
						type: 'Button',
						btnList: [{
								type: 'text',
								label: '同意',
								disabled:(row) => {return row.status > 0},
								handle: (that, row) => this.review(row.id,1)
							},
							{
								type: 'text',
								label: '拒绝',
								disabled:(row) => {return row.status > 0},
								handle: (that, row) => this.review(row.id,2)
							},
						],
						width: 250,
						align:"center"
					}
				],
				statusList:["待审核","通过","拒绝"],
				statusClass:["","el-font-success","el-font-danger"],
				signUpList: [],
				editFormVisible: false,
				editForm: {
					trainId:null,
					trainName: "",
					trainPlanId:null,
					jobNumbers: [],
					status:1,
					remarks:""
				},
				editRules: {
					trainId: [{
						required: true,
						message: '请输入培训名称',
						trigger: 'blur'
					}],
					trainPlanId: [{
						required: true,
						message: '请选择培训计划',
						trigger: 'change'
					}],
					jobNumbers: [{
						required: true,
						message: '请选择申请人',
						trigger: 'change'
					}]
				},
				selectedIdList:[],
				trainList:[],
				trainMap:{},
				trainPlanList:[],
				teacherList:[]
			}
		},
		computed: {
		},
		methods: {
			currentChange(val) {
				this.queryParams.pageNum = val;
				this.selectEnrollList();
			},
			sizeChange(val){
				this.queryParams.pageSize = val;
				this.query();
			},
			query() {
				this.queryParams.pageNum = 1;
				this.selectEnrollList();
			},
			async selectTrainListBYstatustwo(){
				let _this = this;
				let ret = await _this.$api.selectTrainListBYstatustwo();
				if (ret) {
					let list = ret;
					let map = {};
					list.forEach(el=>{
						map[el.id] = el.trainTitle;
					})
					if(!_this.queryParams.trainId && _this.queryParams.trainId !== 0){
						_this.queryParams.trainId = list[0].id;
					}
					_this.trainMap = map;
					_this.trainList = list;
					this.selectEnrollList();
					this.selectTrainPlanByTrainId();
				}
			},
			async selectTrainPlanByTrainId(){
				let _this = this;
				if(_this.queryParams.trainId){
					let ret = await _this.$api.selectTrainPlanByTrainId(_this.queryParams.trainId);
					if (ret) {
						let list = ret.list;
						_this.trainPlanList = list?list:[];
					}
				}else{
					_this.trainPlanList = [];
				}
				
			},
			async selectEnrollList() {
				let _this = this;
				let ret = await _this.$api.selectEnrollList(this.queryParams);
				if (ret) {
					let list = ret.list;
					_this.signUpList = list?list:[];
					_this.queryParams.total = ret.total;
				}
			},
			async selectUserList(){
				let _this = this;
				if(!_this.editForm.trainPlanId){
					return;
				}
				let ret = await _this.$api.selectUserList(_this.editForm.trainPlanId);
				if (ret) {
					let list = ret;
					_this.teacherList = list?list:[];
				}
			},
			trainChange(){
				this.queryParams.trainPlanId = null;
				this.selectTrainPlanByTrainId();
				this.query();
			},
			addAttendance() {
				let editForm = this.editForm;
				let queryParams = this.queryParams;
				editForm.trainId = queryParams.trainId;
				editForm.trainName = this.trainMap[ queryParams.trainId];
				editForm.trainPlanId = queryParams.trainPlanId;
				this.editForm = editForm;
				this.editFormVisible = true;
				this.selectUserList();
			},
			closeEditForm() {
				this.resetEditForm();
				this.editFormVisible = false;
			},
			resetEditForm(){
				this.editForm = {
					trainId:null,
					trainName: "",
					trainPlanId:null,
					jobNumbers: [],
					status:1,
					remarks:""
				};
				this.teacherList = [];
			},
			editTrainPlanChange(){
				this.selectUserList();
			},
			submitEditForm() {
				let _this = this;
				_this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let editForm = _this.editForm;
						let ret = await _this.$api.backEnroll(editForm);
						debugger
						if(ret){
							_this.$message.success("添加成功");
							_this.closeEditForm();
							_this.query();
						}
					} else {
						return false;
					}
				});
			},
			review(id,status) {
				let _this = this;
				let params = {};
				if(id == null){
					//批量，从选择中获取
					let selectedIdList = _this.selectedIdList;
					if(selectedIdList.length == 0){
						_this.$message.warning("请先选择要审核的数据");
						return;
					}
					params.ids = selectedIdList;
				}else{
					params.ids = [id];
				}
				if(status == 2){
					_this.$confirm('确定要拒绝选中的报名吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						params.status = status;
						_this.reviewToServer(id,params);
					}).catch(() => {
					
					})
				}else{
					params.status = status;
					_this.reviewToServer(id,params);
				}
				
			},
			async reviewToServer(id,data){
				let _this = this;
				let ret = await _this.$api.batchREviewExamine(data);
				if(ret){
					if(id == null){
						_this.$refs.myTable.clearSelect();
					}
					_this.$message.success("审核成功");
					_this.selectEnrollList();
				}
			},
			selectItem(selectedList, selectedIdList){
				this.selectedIdList = selectedIdList;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lx-container {
		padding: 32px 24px;
		@include flex-column(flex-start, flex-start);

		// box-sizing: border-box;
		.lx-table {
			width: 100%;
		}
	}
</style>
